<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Desk</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>

<body>
    <ul id="ul">
        <li id="l1" data-i="1">1</li>
        <li id="l3" data-i="3">3</li>
        <li id="l5" data-i="5">5</li>
        <li id="l7" data-i="7">7</li>
    </ul>
    <button onclick="test()">test</button>
    <script type="text/javascript">
    function test() {
        let children = $("#ul").children();

        console.log(children.length);
         console.log($(children[0]).data("i"));
         let insert=false;
        for(let i=0;i<children.length;i++){
        	let index=$(children[i]).data("i")
        	if(index>8){
        		$("<li id='l4' data-i='4'>4</li>").insertBefore(children[i])
        		insert=true;
        		break;
        	}
        }
        if(!insert){
        	$("#ul").append("<li id='l8' data-i='8'>8</li>")
        }


    }
    </script>
</body>

</html>